<template>
    <el-aside class="full-percent">
        <el-scrollbar class="scroll forbid-select full-percent menu-scrollbar">
            <el-menu class="p-menu" ref="menu" unique-opened :default-active="active" mode="vertical" @open="openMenu">
                <template v-for="item in getMenu">
                    <template v-if="check_menu(item)">
                        <!--父目录正常并且下面存在正常的子目录-->
                        <el-sub-menu :index="item.url || item.name" v-show="showMenu(item)"
                            class="font-auto-resize cursor-pointer parent-menu">
                            <template #title class="font-auto-resize">
                                <el-icon>
                                    <component :is="getIcon(item.icon)" />
                                </el-icon>
                                <span class="font-auto-resize sub-menu-parent-title">{{ item.name }}</span>
                                <span class="child-num" v-if="item.num">{{ item.num }}</span>
                            </template>
                            <template v-for="c_item in item.children">
                                <el-menu-item :index="c_item.url || c_item.name" @click="go(c_item)"
                                    class="font-auto-resize no-wrap" v-show="c_item.status === 1">
                                    <span style="padding: 0 10px 0 5px;">{{ c_item.method?.toUpperCase() }}</span>
                                    <span>{{ c_item.name }}</span>
                                </el-menu-item>
                            </template>
                        </el-sub-menu>
                    </template>
                    <template v-else>
                        <el-menu-item :index="item.url || item.name" @click="go(item)"
                            class="font-auto-resize cursor-pointer" v-show="item.status === 1">
                            <el-icon>
                                <component :is="getIcon(item.icon)" />
                            </el-icon>
                            <span>{{ item.method?.toUpperCase() }}</span><span>{{ item.name }}</span>
                        </el-menu-item>
                    </template>
                </template>
            </el-menu>
        </el-scrollbar>
    </el-aside>
</template>

<script setup>
import router from '@/router'
import { getIcon } from "@/utils/tools"
import storeInstance, { storeToRefs } from "@/pinia"

const showMenu = (item) => {
    return item.status === 1 && item.children && item.children.length && item.children.filter(c => c.status === 1).length
}

const { getMenu } = storeToRefs(storeInstance.mainStore)
const emits = defineEmits(["click"])

let active = $ref(router.currentRoute.value.path)
watch(() => router.currentRoute.value.path, (val) => {
    active = val
})

const openMenu = (v) => {
    const allMenu = Array.from(document.querySelectorAll(".sub-menu-parent-title"))
    allMenu.forEach(item => item.parentElement.classList.remove("active-parent"))
    Array.from(document.querySelectorAll(".active-parent-background")).forEach(item => item.classList.remove("active-parent-background"))
    allMenu.filter(item => item.innerText === v)?.[0]?.parentElement.classList.add("active-parent")
}

const go = (item) => {
    router.push(item.url)
    emits("click")
}

const check_menu = (item) => {
    return item.children && item.children.length
}

onMounted(() => {
    document.querySelector(".menu-scrollbar").addEventListener("scroll", () => {
        const activeParent = document.querySelector('.active-parent')
        if (activeParent) {
            const parentTop = activeParent.getBoundingClientRect().top
            if (parentTop <= 10) {
                activeParent.classList.add("active-parent-background")
            } else {
                activeParent.classList.remove("active-parent-background")
            }
        }

    }, true)
})
</script>

<style scoped>
:deep(.el-menu) {
    height: 100%;
    border: 0
}

:deep(.el-menu-item),
:deep(.el-sub-menu__title) {
    height: calc(var(--font-size) * 2 + 10px) !important;
}

:deep(.el-menu--inline) {
    padding-right: 10px;
}
</style>

<style>
/*隐藏菜单横向滚动条*/
.scroll.el-scrollbar .el-scrollbar__bar.is-vertical {
    width: 0 !important;
}

.child-num {
    background: #6671ff;
    aspect-ratio: 1;
    height: 26px;
    color: white;
    line-height: 26px !important;
    text-align: center;
    border-radius: 50%;
    font-size: 16px;
    position: absolute;
    right: 40px;
}

.active-parent {
    position: sticky !important;
    top: 0;
    z-index: 999;
    background: transparent;
}

.active-parent.active-parent-background {
    background: #ffe0e0 !important;

}
</style>